<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
	<style type="text/css">
		body{
			font-size: large;
		}
		id, input{
			size: 20;
		}
	</style>
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$("#DuplicateIDCheck").click(function(){
				if($(".m_id").val() == ""){
					alert("ID를 입력해 주세요.");
				}else{
					location = "CheckID.do?ID="+$(".m_id").val();
					
				}
			});
		});
	
		function checkJoin(){
			var pw = $("#pw").val();
			var repw = $("#repw").val();
			
			if(pw != repw){
				alert("입력하신 비밀번호가 동일하지 않습니다.\n다시 입력해주세요.");
			}else if( ($("#inPut").val() == "") ){
				alert("필수 입력사항은 반드시 입력하세요.");
			}else{
				$("#form").submit();
			}
		}
	</script>
</head>
<body>
	<script type="text/javascript">
		var ID = "${ JoinID }";
		
		if(${ CheckID }){
			alert("'${ JoinID }'는 이미 가입된 아이디입니다.");
		}else{
			alert("'${ JoinID }'는 사용할 수 있는 아이디입니다.");
			
			//alert($(".m_id").val());
		}
		
	</script>
	<center>
		<hr width="400px"> 
		<h2 align="center">회원 가입</h2>
		<hr width="400px">
	</center>
	<p>
	<form action="memberInsert.do" method="post" id="form">
		<table align="center">
			<tr>
				<td colspan="3">
					<font color="red" size="2"><b>*</b></font> <font size="2">필수 입력사항입니다.</font>
				</td>
			</tr>
			<tr>
				<td>회원 아이디</td>
				<td>
					<input id="id" type="text" name="m_id" class="m_id">
				</td>
				<td>
					<font color="red"><b>*</b></font>
					<input id="DuplicateIDCheck" type="button" value="중복체크">
				</td>
			</tr>
			<tr>
				<td>비밀번호</td>
				<td>
					<input id="inPut" type="password" id="pw" name="m_pw" size="21">
				</td>
				<td><font color="red"><b>*</b></font></td>
			</tr>
			<tr>
				<td>비밀번호 확인</td>
				<td>
					<input id="inPut" type="password" id="repw" size="21">
				</td>
				<td><font color="red"><b>*</b></font></td>
			</tr>
			<tr>
				<td>이름</td>
				<td>
					<input id="inPut" type="text" name="m_name">
				</td>
				<td><font color="red"><b>*</b></font></td>
			</tr>
			<tr>
				<td>주소</td>
				<td>
					<input id="inPut" type="text" name="m_addr">
				</td>
				<td><font color="red"><b>*</b></font></td>
			</tr>
			<tr>
				<td>연락처</td>
				<td>
					<input id="inPut" type="text" name="m_tell">
				</td>
				<td><font color="red"><b>*</b></font></td>
			</tr>
			<tr>
				<td>이메일</td>
				<td>
					<input type="text" name="m_email">
				</td>
				<td></td>
			</tr>
			<tr>
				<td colspan="3" align="center">
					<br>
					<input type="button" value="작성완료" onclick="checkJoin();">
					<input type="reset" value="취소">
					<input type="button" value="목록보기" onclick="location.href='listBoard.do';">
				</td>
			</tr>
		</table>
	</form>
</body>
</html>